<template>
  <div class="one-prepare">
    <template ref="headerRef">
      <HeaderRefComponent @searchHandle="query($event)"/>
    </template>
    <Search :params="params" @search="searchList" :loading='searchLoading'/>
    <div class="cus-title">
      <div class="class-time-title">上课时间</div>
      <div class="subject">科目</div>
      <div class="name">学生/小组课名称</div>
    </div>
    <div class="list">
      <cus-list url="/admin/lessonInfo/query" :default="params" :auto-request="false" ref="listRef" :has-page="false" :emptyShow="false" :filterData="filterData">
        <template v-slot:avatar>
          <img src="/src/assets/prepare-teach/book-logo.png" width="36"  alt="点津问道标品">
        </template>
        <template v-slot="{ data }">
          <div class="one-prepare-content">
            <div class="class-time">{{ data.startDate }}</div>
            <div class="subject">{{ data.subjectName }}</div>
            <div class="name">{{ data.lessonName }}</div>
          </div>
        </template>
        <template v-slot:actions="{ data }">
          <div class="menu">
            <el-button size="small" round type='primary' v-if="data.status === 0" @click="prepareClick(data)">去备课</el-button>
            <el-button size="small" round type='primary' v-if="data.status === 1" @click="prepareClick(data)" class="btn-examine">教案审核中...</el-button>
            <el-button size="small" round type='primary' v-if="data.status === 2" @click="prepareClick(data)" class="btn-fail">审核未通过</el-button>
            <el-button size="small" round type='primary' v-if="data.status === 3" @click="prepareClick(data)" class="btn-pass">审核已通过</el-button>
          </div>
        </template>
        <template v-slot:emptySlot>
          <div class="init-data-img">
            <img src="/src/assets/one-prepare/no-data.png" alt="点津问道标品" width="300">
            <p>哎呀，当前用户未查到排课数据</p>
          </div>
        </template>
         <template v-slot:wrongSlot>
          <div class="init-data-img">
            <img src="/src/assets/one-prepare/no-data.png" alt="点津问道标品" width="300">
            <p>当前用户手机号和教务系统手机号不匹配</p>
          </div>
        </template>
      </cus-list>
    </div>
  </div>
</template>

<script lang='ts'>
import { ref, Ref, onMounted, nextTick } from 'vue'
import Search from './components/search-time.vue'
import HeaderRefComponent from './components/header-ref.vue';
import $ from '$';
import PrepareEdit from './prepare-edit/index.vue';
import store from './store'
import Moment from 'moment'
export default {
  props: {
    listShow: Number
  },
  components: { Search, HeaderRefComponent },
  setup(props) {
    let params: Ref<any> = ref({
      startDate: Moment().day(-14).format("YYYY-MM-DD"),
      endDate: Moment().day(7).format("YYYY-MM-DD"),
      searchType: 0
    });
    let searchLoading = ref(true)
    let listRef: Ref<any> = ref();
    let initData: Ref<any> = ref({})
    let loading = ref(true)
    nextTick(() => {
      listRef.value.request(params.value).then(() => searchLoading.value = false)
    })
    $.emitter.on('prepare-init-data',() => listRef.value.request(params.value).then(() => searchLoading.value = false))
    let searchData = {}
    // 搜索时刷新接口
    const searchList = (data) => {
      searchLoading.value = true
      params.value = { ...params.value, ...data }
      listRef.value.request(data).then(() => searchLoading.value = false);
      searchData = data
    }
    let nameSearch = ''
    const query = (val) => {
      nameSearch = val
      listRef.value.request(params.value).then(() => searchLoading.value = false);
    }
    const filterData = (list) => {
      searchLoading.value = false
      if (!nameSearch) {
        return list
      }
      return  list.filter((e) => e.lessonName.indexOf(nameSearch) > -1 )
    }
    const prepareClick = (data) => {
      let __params = searchData ? searchData : params.value
      $.screen.create( PrepareEdit, { data }, { zIndex: '2000', hiddenBack: false}).finally(() => {
        listRef.value.request(__params).then(() => searchLoading.value = false);
        store.commit('set_class_data', null);
        store.commit('set_direct_class', false);
        store.commit('set_direct_data', null);
      })
    }
    let headerRef = ref();
    onMounted(() => {
      $.emitter.emit('slot', headerRef)
    })
    return { params, listRef, searchList, prepareClick, initData, loading, searchLoading, headerRef, query, filterData }
  }
}
</script>

<style lang="scss" scoped>
.one-prepare{
  height: 100%;
  :deep(.cus__list__container .cus__list__item){
    padding: 5px 10px;
    align-items: center;
  }
  :deep(.layout__container) {
    background: red;
  }
  :deep(.cus__list__container) {
    border-radius: 0 0 6px 6px;
  }
  .no-data {
    width: 100%;
    min-width: 500px;
    padding: 30px;
    min-height: calc(100% - 225px);
    border-radius: 0 0 6px 6px;
    box-shadow: 0px 1px 6px 0px rgb(91 125 255 / 8%);
    background: #fff;
    display: flex;
    align-items: center;
  }
  .init-data-img {
    width: 475px;
    margin: 0px auto;
    text-align: center;
    & > p {
      color: #77808D;
      font-size: 20px;
      margin-top: 10px;
    }
  }
  .class-time-title {
    min-width: 463px;
    margin-left: 5px;
  }
  .class-time {
    width: 400px;
  }
  .subject {
    min-width: 200px;
  }

  .name {
    min-width: 400px;
  }
  .cus-title {
    margin-bottom: 1px;
    height: 46px;
    padding: 10px 20px;
    display: flex;
    color: #77808D;
    background: #fff;
    border-radius: 6px 6px 0 0;
    box-shadow: 0px 1px 0px 0px #DCDEE3;
  }
  .list {
    height: 100%;
    overflow: auto;
  }
  .one-prepare-content {
    display: flex;
    align-items: center;
    line-height: 58px;
    .courseTitle{
      display: flex;
      justify-content: space-between;
      align-items: center;
      img{
        margin-right: 20px;
      }
    }

    .title{
      flex: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .session{
      flex: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 500;
      color: #1A2633;
    }
    .time{
      flex: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 400;
      color: #909399;
    }
  }
  .menu{
    .el-button{
      margin-right: 10px;
      font-size: 14px;
      padding: 10px 11px;
      width: 108px;
    }
    .btn-examine {
      background: #FAAD14;
      border-color: #FAAD14;
    }
    .btn-fail {
      background: #77808D;
      border-color: #77808D;
    }
  }
}
@media screen and (max-width: 1440px){
  .one-prepare{
    .class-time-title {
      min-width: 363px;
      margin-left: 5px;
    }
    .class-time {
      width: 300px;
    }
    .subject {
      min-width: 150px;
    }
    .name {
      min-width: 300px;
    }
  }
}

@media screen and (max-width: 1280px){
  .one-prepare{
    .class-time-title {
      min-width: 263px;
      margin-left: 5px;
    }
    .class-time {
      width: 200px;
    }
    .subject {
      min-width: 100px;
    }
    .name {
      min-width: 200px;
    }
  }
  .menu{
    .el-button{
      margin-right: 0;
    }
  }
}
</style>
